import React, { useEffect, useImperativeHandle, forwardRef, useState } from 'react'
import { Modal, Form, Input, DatePicker } from 'antd'
import dayjs from 'dayjs'

const AddOrUpdateForm = forwardRef(({ handleSuccess }, ref) => {
  const [form] = Form.useForm()
  let [open, setOpen] = useState(false)

  const handleOk = async () => {
    // 1、执行添加或编辑逻辑
    // form.validateFields({ validateOnly: false }).then(res => {
    //   console.log(res)
    // }).catch(() => {
    //   console.error('err')
    // })
    const data = await form.validateFields({ validateOnly: false }).catch(() => {
      console.log('ERROR')
    })
    data.birth = dayjs(data.birth).format('YYYY-MM-DD')
    console.log(data)
    // 2、关闭弹框
    // handleSuccess()
  }

  useEffect(() => {
    console.log('初次渲染')
  }, [])

  const cancel = () => {
    setOpen(false)
  }

  const onFinish = (values) => {}

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

  let [isAdd, setIsAdd] = useState(false)

  useImperativeHandle(ref, () => ({
    resetData: () => {
      form.resetFields()
      setOpen(true)
      setIsAdd(true)
    },
    setData: (data) => {
      form.setFieldsValue(data)
      setOpen(true)
      setIsAdd(false)
    }
  }))

  return (
    <>
      <Modal
        maskClosable={false}
        closable={false}
        title={isAdd ? '新增用户' : '编辑用户'}
        open={open}
        onOk={handleOk}
        onCancel={cancel}>
        <Form
          form={form}
          labelCol={{
            span: 5
          }}
          wrapperCol={{
            span: 19
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete='off'>
          {isAdd === 1 && <Form.Item name='id' hidden><Input /></Form.Item>}
          <Form.Item
            label='名称'
            name='name'
            rules={[
              {
                required: true,
                message: '请输入名称'
              }
            ]}>
            <Input placeholder='请输入名称' />
          </Form.Item>

          <Form.Item
            label='用户名'
            name='username'
            rules={[
              {
                required: true,
                message: '请输入用户名'
              }
            ]}>
            <Input.Password placeholder='请输入用户名' />
          </Form.Item>
          <Form.Item
            label='邮箱'
            name='email'
            rules={[
              {
                required: true,
                message: '请输入邮箱地址'
              }
            ]}>
            <Input placeholder='请输入邮箱地址' />
          </Form.Item>
          <Form.Item
            label='出生日期'
            name='birth'
            rules={[
              {
                required: true,
                message: '请填写出生日期'
              }
            ]}>
            <DatePicker />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
})

export default AddOrUpdateForm
